<template>
    <div class="app-container">
      <el-row :gutter="20">
        <el-col :span="20" :xs="24">
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button
                type="add"
                plain
                icon="el-icon-add"
                size="mini"
                @click="handleAdd"
                v-hasPermi="['databases:database:add']"
              >新增</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" ></right-toolbar>
          </el-row>

          <el-table v-loading="loading" :data="list">
            <el-table-column label="数据库名称" key="database" prop="database"/>
            <el-table-column
              label="操作"
              align="center"
              width="160"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.row)"
                  v-hasPermi="['databases:database:remove']"
                >删除</el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleChange(scope.row)"
                  v-hasPermi="['databases:database:change']"
                >切换</el-button>
              </template>
            </el-table-column>
          </el-table>

        </el-col>
      </el-row>


      <el-dialog :title="add.title" :visible.sync="add.open" width="400px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="数据库名" prop="dbname">
                <el-input v-model="form.dbname" placeholder="请输入数据库名" />
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="字符集" prop="collection">
                <el-select v-model="name" placeholder="请选择">
                  <el-option
                    v-for="item in collections"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="add.open = false">取 消</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
  import {list,addDatabase} from "@/api/databases/database";
  import {listCollections} from '@/api/databases/collections';
    export default {
      data(){
          return{
            name: "Database",
            loading:false,
            list:[],
            showSearch:true,
            add:{
              title:'',
              open:false
            },
            form:{},
            rules:{
              dbname: [
                { required: true, message: "数据库名不能为空", trigger: "blur" }
              ]
            },
            collections:[]
          }
      },
      created() {
        this.getList();
        this.getCollectionsList();
      },
      methods:{
        getList(){
          this.loading = true;
          list().then(response => {
            this.list = response.rows;
            this.loading = false;
          })
        },
        getCollectionsList(){
          this.loading = true;
          listCollections().then(response => {
            this.collections = response.data;
            this.loading = false;
          })
        },
        handleAdd() {
          this.add={
            title:'新增数据库',
            open:true
          }
        },
        submitForm: function() {
          this.$refs["form"].validate(valid => {
            if (valid) {
              addDatabase(this.form).then(response => {
                this.msgSuccess("新增成功");
                this.add.open = false;
                this.getList();
              });
            }
          });
        },
        handleDelete(row){

        },
        handleChange(row){

        }
      }
    }
</script>

<style scoped>

</style>
